<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单页面</title>
    <script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js"></script>
</head>

<body>
    <div id="container" style="width: 100vw; height: 100vh">
        <!-- 内容区域 -->
    </div>

</body>
<script>
    console.log(G6, 'G6');
    G6.registerNode('card-node', {
        draw: function drawShape(cfg, group) {
            const r = 2;
            const color = '#5B8FF9';
            const w = cfg.size[0];
            const h = cfg.size[1];
            const shape = group.addShape('rect', {
                attrs: {
                    x: -w / 2,
                    y: -h / 2,
                    width: w, //200,
                    height: h, // 60
                    stroke: color,
                    radius: r,
                    fill: '#fff',
                },
                // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
                name: 'main-box',
                draggable: true,
            });
            group.addShape('rect', {
                attrs: {
                    x: -w / 2,
                    y: -h / 2,
                    width: w, //200,
                    height: h / 2, // 60
                    fill: color,
                    radius: [r, r, 0, 0],
                },
                // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
                name: 'title-box',
                draggable: true,
            });

            // title text
            group.addShape('text', {
                attrs: {
                    textBaseline: 'top',
                    x: -w / 2 + 8,
                    y: -h / 2 + 2,
                    lineHeight: 20,
                    text: cfg.id,
                    fill: '#fff',
                },
                // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
                name: 'title',
            });
            cfg.children &&
                group.addShape('marker', {
                    attrs: {
                        x: w / 2,
                        y: 0,
                        r: 6,
                        cursor: 'pointer',
                        symbol: cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse,
                        stroke: '#666',
                        lineWidth: 1,
                        fill: '#fff',
                    },
                    // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
                    name: 'collapse-icon',
                });
            group.addShape('text', {
                attrs: {
                    textBaseline: 'top',
                    x: -w / 2 + 8,
                    y: -h / 2 + 24,
                    lineHeight: 20,
                    text: 'description',
                    fill: 'rgba(0,0,0, 1)',
                },
                // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
                name: `description`,
            });
            return shape;
        },
        setState(name, value, item) {
            if (name === 'collapsed') {
                const marker = item.get('group').find((ele) => ele.get('name') === 'collapse-icon');
                const icon = value ? G6.Marker.expand : G6.Marker.collapse;
                marker.attr('symbol', icon);
            }
        },
    });

    // const data = {
    //     id: 'A',
    //     children: [
    //         {
    //             id: 'A1',
    //             children: [{ id: 'A11' }, { id: 'A12' }, { id: 'A13' }, { id: 'A14' }],
    //         },
    //         {
    //             id: 'A2',
    //             children: [
    //                 {
    //                     id: 'A21',
    //                     children: [{ id: 'A211' }, { id: 'A212' }],
    //                 },
    //                 {
    //                     id: 'A22',
    //                 },
    //             ],
    //         },
    //     ],
    // };
    const data = {
        id: 'Node-1',
        children: [
            {
                id: 'Node-2',
                children: [
                    {
                        id: 'Node-3',
                        children: [
                            { id: 'Node-4' }
                        ]
                    }
                ]
            }
        ]
    };

    const container = document.getElementById('container');
    const width = container.scrollWidth;
    const height = container.scrollHeight || 500;

    const graph = new G6.TreeGraph({
        container: 'container',
        width,
        height,
        modes: {
            default: ['drag-canvas', 'zoom-canvas', 'drag-node'],
        },
        defaultNode: {
            type: 'card-node',
            size: [100, 40],
        },
        defaultEdge: {
            type: 'cubic-horizontal',
            style: {
                endArrow: true,
            },
        },
        layout: {
            type: 'indented',
            direction: 'LR',
            dropCap: false,
            indent: 200,
            getHeight: () => {
                return 60;
            },
        },
    });

    graph.data(data);
    graph.render();
    graph.fitView();
    graph.on('node:click', (e) => {
        if (e.target.get('name') === 'collapse-icon') {
            e.item.getModel().collapsed = !e.item.getModel().collapsed;
            graph.setItemState(e.item, 'collapsed', e.item.getModel().collapsed);
            graph.layout();
        }
    });
    if (typeof window !== 'undefined')
        window.onresize = () => {
            if (!graph || graph.get('destroyed')) return;
            if (!container || !container.scrollWidth || !container.scrollHeight) return;
            graph.changeSize(container.scrollWidth, container.scrollHeight);
        };
</script>

</html>